<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for 循环数组</title>
</head>

<body>
    <div id="app">
        <!-- v-for 循环数组 -->
        <ul>
            <li v-for='book in books'>{{book.name}}</li>
        </ul>
        <br>
        <p v-for='(book,index) in books'>索引:{{index}} - {{book.name}}</p>
        <br>
        <ul>
            <template v-for='book in books'>
                <li>书名：{{book.name}}</li>
                <li>作者：{{book.author}}</li>
            </template>
        </ul>
        <br>
        <!-- v-for 遍历对象 -->
        <span v-for='value in user'>{{value}}-</span>
        <br>
        <li v-for='(value,key,index) in user'>{{index}}-{{key}}-{{value}}</li>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [{
                    id: 1,
                    name: '《Vue.js实战》',
                    author: '梁灏'
                }, {
                    id: 2,
                    name: 'JavaScript语言精粹》',
                    author: 'Douglas Crockford'

                }, {
                    id: 3,
                    name: '《JavaScript高级程序设计》',
                    author: 'Nicholas C.Zakas'
                }, ],
                user: {
                    name: 'Aresn',
                    gender: '男',
                    age: 26,
                }
            }
        })
    </script>
</body>

</html>